import React, {useEffect, useState} from 'react';
import {Button, Form, Input, message, Select} from 'antd';
import {useHistory} from 'react-router-dom';
import services from "./services";
import {UserOutlined,LockOutlined} from '@ant-design/icons';
// @ts-ignore
import backgroundImage from './images/loginback.png';



function Login() {
    const [form] = Form.useForm();
    const [loading, setLoading] = useState(false);
    const history = useHistory();
    const [schoolList, setSchoolList] = useState<{ id: number; name: string }[]>([]); // 学校列表

    useEffect(() => {
        services.queryAllSchool().then(data => {
            setSchoolList(data);
        });
    }, []);


    const handleLogin = async () => {
        try {
            await form.validateFields();
            setLoading(true);
            const values = await form.getFieldsValue();
            services.login(values).then(data => {
                if (data.successFlag === true) {
                    message.success('登录成功');
                    history.push({
                        pathname: '/main',
                        state: {
                            schoolName: data.schoolName,
                            schoolId: data.schoolId,
                            teacherId: data.teacherId,
                            teacherName: data.teacherName,
                            jobNumber: data.jobNumber
                        },
                    });
                } else {
                    message.error('账号或密码错误，登录失败');
                }
            });
        } catch (error) {
            return;
        } finally {
            setLoading(false); // 发送请求结束后取消 loading 状态
        }
    };

    return (
        <div style={{
            backgroundImage: `url(${backgroundImage})`,
            backgroundSize: 'cover',
            backgroundPosition: 'center',
            backgroundRepeat: 'no-repeat',
            width: '100vw',
            height: '100vh',
            overflow: 'hidden', /* 设置页面不可滚动 */
        }}>
            <div style={{
                display: 'flex',
                flexDirection: 'column',
                justifyContent: 'center',
                alignItems: 'center',
                height: '60vh', /* 登录form高度占屏幕高度的60% */
                marginTop: '20vh', /* 登录form垂直上五分之二的位置 */
            }}>
                <div className="login-container" style={{width: 400, backgroundColor: '#add2f7', borderRadius: 10, padding: 30}}>
                    <div className="login-header">
                        <div style={{display: 'flex', justifyContent: 'center'}}>
                            <h1>课程学习过程管理系统</h1>
                        </div>
                    </div>
                    <div className="login-form">
                        <Form form={form} onFinish={handleLogin}>
                            <Form.Item name="schoolId" label='学校' rules={[{required: true, message: '请选择学校'}]}>
                                <Select placeholder="请选择学校" suffixIcon={<UserOutlined />}>
                                    {schoolList?.map(school => (
                                        <Select.Option key={school.id} value={school.id}>
                                            {school.name}
                                        </Select.Option>
                                    ))}
                                </Select>
                            </Form.Item>

                            <Form.Item name="jobNumber" label='工号' rules={[{required: true, message: '请输入工号'}]}>
                                <Input placeholder="请输入工号" prefix={<UserOutlined />} />
                            </Form.Item>

                            <Form.Item name="password" label='密码' rules={[{required: true, message: '请输入密码'}]}>
                                <Input.Password placeholder="请输入密码" prefix={<LockOutlined />} onPressEnter={handleLogin} />
                            </Form.Item>

                            <Form.Item>
                                <Button type="primary" htmlType="submit" loading={loading} style={{width: '100%'}}>
                                    登录
                                </Button>
                            </Form.Item>
                        </Form>
                    </div>
                </div>
            </div>
        </div>

    );
}

export default Login;